<!--
 * @Author: your name
 * @Date: 2021-11-22 16:02:34
 * @LastEditTime: 2023-06-08 10:31:50
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \agricultural-production-web\src\views\agricultural-work-management\components\selectbutton\index.vue
-->
<template>
  <div class="butt-list-sty">
    <div v-for="(item,index) in buttonselectlist" :key="index" class="basebut2" :class="index === itemtypeactive? 'basebut1':'basebut2'" @click="itemtypeactive = index">
      {{ item.itemTypeName }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    numone: {
      type: Number,
      default: () => {
        return 0
      }
    }
  },
  data() {
    return {
      itemtypeactive: 0,
      buttonselectlist: [
        { itemTypeId: 2, itemTypeName: "待处理" },
        { itemTypeId: 1, itemTypeName: "处理完成" },
      ]
    }
  },
  watch: {
    numone: {
      handler(newvalue) {
        this.numone = newvalue
      },
      immediate: true

    },
    itemtypeactive(newvalue) {
      this.setfarmtypeid(newvalue)
    }
  },
  mounted() {
    this.setfarmtypeid(0)
  },
  methods: {
    setfarmtypeid(i) {
      this.$emit('topitemtype', this.buttonselectlist[i]['itemTypeId'])
    }
  }
}
</script>
<style lang="scss" scoped>
.toprightred{
  background-color: #F56C6C;
    border-radius: 10px;
    color: #FFF;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #FFF;
    position: absolute;
    top: -10px;
    // right: 0;
}
.butt-list-sty{
    height: 36px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    // margin-bottom: 10px;
    position: relative;
}
.basebut1 {
    width: 100px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: transparent;
    border: #6ecae3 1px solid;
    color: turquoise;
    cursor: pointer;
}
.basebut2 {
    width: 100px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    background-color: transparent;
    border: #6ecae3 1px solid;
     cursor: pointer;

}
</style>
